<template>
  <Modal v-model="modal" title="门店数据" :width="800">
    <Tabs value="tab1" type="card">
      <TabPane label="门店4、5月任务完成/指标" name="tab1">
        <p class="mb">数据统计： {{ completed }}/{{ target }}</p>
        <Table
          stripe
          :columns="columns"
          :data="taskData"
        />
      </TabPane>
      <TabPane label="16寸及以上(规定花纹)入库明细" name="tab2">
        <p class="mb">数据统计： {{ size }}</p>
        <Table
          stripe
          :columns="columns"
          :data="sizeData"
        />
      </TabPane>
    </Tabs>
    <div slot="footer">
      <Button size="large" type="text" @click="modal = false">关闭</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  data () {
    return {
      id: null,
      modal: false,
      btnDisabled: false,
      columns: [{
        align: 'left',
        key: 'productName',
        title: '商品'
      }, {
        title: '数量',
        key: 'totalQuantity',
        align: 'left'
      }],
      completed: null,
      target: null,
      size: null,
      taskData: [],
      sizeData: []
    }
  },
  methods: {
    openModal () {
      this.modal = true
    },
    closeModal () {
      this.modal = false
    },
    getInfo (id, giftTypeEnum, month, year) {
      let param = {
        giftTypeEnum: giftTypeEnum,
        storeId: id,
        month,
        year
      }
      this.$ajaxGet(`/report/purch_exchange_record/statistic`, param).then(data => {
        let hasTask = data.taskDTOList && data.taskDTOList.length
        this.completed = hasTask ? data.taskDTOList[0].completed : null
        this.target = hasTask ? data.taskDTOList[0].target : null
        this.size = data.sizeTaskComplete || null
        this.sizeData = data.sizeStatisticProductDTOS || []
        this.taskData = hasTask ? data.taskDTOList[0].taskStatisticProductDTOS : []
        this.openModal()
      })
    }
  }
}
</script>

